import React, { useState, useEffect } from 'react';
import { Statistic, Card, Row, Col, Drawer, Spin, message, Upload, Modal, Tabs, Calendar } from 'antd';
import { MailFilled, PhoneFilled, EnvironmentFilled, BankOutlined, FormOutlined, FunnelPlotOutlined, PayCircleOutlined, TeamOutlined } from '@ant-design/icons';
import styles from './Welcome.less';
import { Funnel,Gauge,Pie,Column} from '@ant-design/plots';
import ProTable, { ProColumns } from '@ant-design/pro-table';
export default ((): React.ReactNode => {
  const [versionData, setVersionData] = useState<any>([{title:'发现线索',num:100,money:0},{title:'创建客户',num:70,money:0},{title:'生成商机',num:60,money:'1,500,000'},{title:'报价单',num:50,money:'1,000,000'},{title:'签订合同',num:20,money:'800,000'},
  {title:'赢单',num:10,money:'600,000'},{title:'输单',num:10,money:'200,000'},{title:'取消',num:0,money:0}]);

  const [data1,setData1] = useState<any>([
    {title:'激光治疗机',value:7805600},    {title:'麻醉机',value:7800000},{title:'深部X光治疗机',value:5600000}
  ])
  const [data2,setData2] = useState<any>([
    {name:'张三',money1:78000,percent:97.5,money2:80000,percent2:80},
    {name:'李四',money1:100000,percent:83.5,money2:200000,percent2:80}
  ])
  const [data3,setData3] = useState<any>([
    {title:'体温计',value:56800},    {title:'听诊器',value:125600},{title:'呼吸机',value:128000}
  ])
  const versionColumn:ProColumns[] = [
    {
      title:"商机阶段",
      dataIndex: 'title',
    },
    {
      title:"数量/个",
      dataIndex: 'num',
    },
    {
      title:"金额/元",
      dataIndex: 'money',
    },
  ]

  const column1:ProColumns[] = [
    {
      title:"设备",
      dataIndex: 'title',
    },
    {
      title:"金额",
      valueType:'money',
      align:'right',
      dataIndex: 'value',
    },
  ]
  const column2:ProColumns[] = [
    {
      title:"业务员",
      dataIndex: 'name',
    },
    {
      title:"回款完成金额",
      dataIndex: 'money1',
      valueType:'money',
    },
    {
      title:"回款完成金率",
      dataIndex: 'percent1',
      valueType:'percent'
    },
    {
      title:"业务完成金额",
      dataIndex: 'money2',
      valueType:'money',
    },
    {
      title:"成金率",
      dataIndex: 'percent2',
      valueType:'percent'
    },
  ]
  const column3:ProColumns[] = [
    {
      title:"设备",
      dataIndex: 'title',
    },
    {
      title:"销量",
      align:'right',
      dataIndex: 'value',
    },
  ]

  const funnelData = [
    { stage: '发现线索(100个)', number: 400 },
    { stage: '创建客户(70个)', number: 380 },
    { stage: '生成商机(60个，共1,500,000元)', number: 360 },
    { stage: '报价单(50个，共1,000,000元)', number: 340 },
    { stage: '签订合同(20个，共	800,000元)', number: 320 },
    { stage: '赢单(10个，共600,000元)', number: 300 },
    { stage: '输单(10个，共200,000元)', number: 280 },
    { stage: '取消(0个，共0.00元)', number: 200 },
  ]

  const config = {
    data: funnelData,
    xField: 'stage',
    yField: 'number',
    legend: false,
    label:{
      formatter:'',
    },
    tooltip:false,
    conversionTag:false
  };

  const gaugeConfig = {
    percent: 0.25,
    range: {
      ticks: [0, 1 / 3, 2 / 3, 1],
      color: ['#F4664A', '#FAAD14', '#30BF78'],
    },
    axis: {
      label: {
        formatter(v) {
          return Number(v) * 100;
        },
      },
      subTickLine: {
        count: 3,
      },
    },
    indicator: {
      pointer: {
        style: {
          stroke: '#D0D0D0',
        },
      },
      pin: {
        style: {
          stroke: '#D0D0D0',
        },
      },
    },
    legend: false,
    tooltip:false,
  }

  const columnConfig = {
      data:[{type:'解决方案',sales:1},{type:'发现需求',sales:2},{type:'确认需求',sales:2},{type:'输单',sales:2},{type:'招投标',sales:3},{type:'上午谈判',sales:5},{type:'赢单',sales:6}],
      xField: 'type',
      yField: 'sales',
      label: {
        // 可手动配置 label 数据标签位置
        position: 'middle',
        // 'top', 'bottom', 'middle',
        // 配置样式
        style: {
          fill: '#FFFFFF',
          opacity: 0.6,
        },
      },
      xAxis: {
        label: {
          autoHide: true,
          autoRotate: false,
        },
      },
      meta: {
        type: {
          alias: '类别',
        },
        sales: {
          alias: '销售额',
        },
      },
  }

  const pieConfig = {
    appendPadding: 10,
    data:[
      {type:'决策者不支持',value:16},{type:'产品与业务不支持',value:22},{type:'价格无法接受',value:30},{type:'其他原因',value:40},{type:'竞品赢单',value:10}
    ],
    angleField: 'value',
    colorField: 'type',
    radius: 0.75,
    label: {
      type: 'spider',
      labelHeight: 28,
      content: '{name}\n{percentage}',
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
  }

  return <div>
    <Tabs centered style={{backgroundColor:'#fff'}}>
      <Tabs.TabPane tab="销售漏⽃" key="item-1">
      <div style={{backgroundColor:'#f0f0f0'}}>
        <Card title="客户跟进" bordered={false} size="small">
          <Row gutter={[8, 8]} style={{padding:'20px 100px'}} justify="center">
              <Col span={6} >
              <Statistic title="当前客户总数" value={7} suffix={<span style={{color:'#888',fontSize:14}}>个</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="新增客户数" value={0} suffix={<span style={{color:'#888',fontSize:14}}>个</span>}valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="跟进客户数" value={1} suffix={<span style={{color:'#888',fontSize:14}}>个</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="首次成交客户数" value={0} suffix={<span style={{color:'#888',fontSize:14}}>个</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="成交客户数" value={0} suffix={<span style={{color:'#888',fontSize:14}}>个</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="复购客户数" value={0} suffix={<span style={{color:'#888',fontSize:14}}>个</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="客户活跃率" value={14.29} suffix={<span style={{color:'#888',fontSize:14}}>%</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="跟进次数" value={1}  suffix={<span style={{color:'#888',fontSize:14}}>次</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
          </Row>
          </Card>
          <div style={{height:10}}></div>
          <Card title="销售商机" bordered={false} size="small">
          <Row>
              <Col span={12} style={{display:'flex',flexDirection:'column',padding:'0 20px'}}>
                  <h3 style={{alignSelf:'end'}}>销售商机</h3>
                  <div style={{alignSelf:'center'}}>
                    <Funnel {...config}/>
                  </div>
              </Col>
              <Col span={12} style={{display:'flex',flexDirection:'column',padding:'0 20px',borderLeft:'solid 1px #f0f0f0'}}>
                 <h3 style={{alignSelf:'end'}}>阶段版本</h3>
                 <div style={{alignSelf:'center',width:'100%'}}>
                    <ProTable size="small" search={false} rowKey="title" pagination={false} toolBarRender={false} columns={versionColumn} dataSource={versionData}/>
                  </div>
              </Col>
          </Row>
          <Row gutter={[8, 8]} style={{padding:'20px 100px'}} justify="center">
              <Col span={6} >
              <Statistic title="新增商机数" value={1} suffix={<span style={{color:'#888',fontSize:14}}>个</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="新增商机金额" value={'3,500.00'} suffix={<span style={{color:'#888',fontSize:14}}>元</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="到期商机数" value={1}  suffix={<span style={{color:'#888',fontSize:14}}>个</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
              <Col span={6} >
              <Statistic title="到期商机金额" value={'1,500.00'}  suffix={<span style={{color:'#888',fontSize:14}}>元</span>} valueStyle={{color:'#489ce9'}}/>
              </Col>
      
          </Row>
        </Card>
      </div>
      
      </Tabs.TabPane>
      <Tabs.TabPane tab="简报看板" key="item-2">
        <div style={{backgroundColor:'#f0f0f0'}}>
          <Row>
            <Col span={18}>
              <Card title="跟进全局" bordered={false} size="small">
              <Row gutter={[8, 8]} style={{padding:'20px 100px'}} justify="center">
                  <Col span={6} >
                  <Statistic title="当前线索数（个）" prefix={<BankOutlined style={{color:'#888888',fontSize:18}}/>} value={1}  valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="新增线索数（个）" value={0} prefix={<BankOutlined style={{color:'#888888',fontSize:18}}/>}  valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="跟进线索数（个）" value={0} prefix={<BankOutlined style={{color:'#888888',fontSize:18}}/>}  valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="当前客户数（个）" value={7} prefix={<TeamOutlined style={{color:'#888888',fontSize:18}}/>} valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="新增客户数（个）" value={0} prefix={<TeamOutlined style={{color:'#888888',fontSize:18}}/>} valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="跟进客户数（个）" value={1} prefix={<TeamOutlined style={{color:'#888888',fontSize:18}}/>} valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="合同订单数（个）" value={0} prefix={<PayCircleOutlined style={{color:'#888888',fontSize:18}}/>} valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="合同订单金额（元）" value={0.00} prefix={<PayCircleOutlined style={{color:'#888888',fontSize:18}}/>} valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="新增商机数（个）" prefix={<FunnelPlotOutlined style={{color:'#888888',fontSize:18}}/>} value={0} valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="新增商机金额（元）" prefix={<PayCircleOutlined style={{color:'#888888',fontSize:18}}/>} value={'1,500.00'} valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="采购合同数（个）" value={0} prefix={<FormOutlined style={{color:'#888888',fontSize:18}}/>} valueStyle={{color:'#489ce9'}}/>
                  </Col>
                  <Col span={6} >
                  <Statistic title="采购金额（元）" value={0.00} prefix={<PayCircleOutlined style={{color:'#888888',fontSize:18}}/>} valueStyle={{color:'#489ce9'}}/>
                  </Col>
              </Row>
              </Card>
              <div style={{height:10}}></div>
              <Card title="业绩目标" bordered={false} size="small">
                <div style={{display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'center',height:226}}>
                    <Gauge {...gaugeConfig}></Gauge>
                    <div>
                    <Statistic
                      title="已完成值"
                      value={1}
                      suffix={<span style={{color:'#888',fontSize:14}}>元</span>}
                      valueStyle={{ color: '0.00' }}
                    />
                      <Statistic
                      title="目标值"
                      value={'未设定'}
                      suffix={<span style={{color:'#888',fontSize:14}}></span>}
                      valueStyle={{ color: '#3f8600' }}
                    />
                </div>
                </div>
                
              </Card>
            </Col>
            <Col span={6} style={{paddingLeft:10}}>
               <Card title="访客计划" bordered={false} size="small">
                  <Calendar fullscreen={false}/>
               </Card>
               <div style={{height:10}}></div>
               <Card title="遗忘提醒" bordered={false} size="small">
               <Row gutter={[8, 8]} style={{height:160}}>
                <Col span={12} >
                   <Statistic
                    title="一周到两周未联系"
                    value={1}
                    suffix={<span style={{color:'#888',fontSize:14}}>个</span>}
                    valueStyle={{ color: '#3f8600' }}
                   />
                </Col>
                <Col span={12} >
                <Statistic
                    title="两周到一月未联系"
                    value={0}
                    suffix={<span style={{color:'#888',fontSize:14}}>个</span>}
                    valueStyle={{ color: '#3f8600' }}
                   />
                </Col>
                <Col span={12} >
                <Statistic
                    title="一月到两月未联系"
                    value={0}
                    suffix={<span style={{color:'#888',fontSize:14}}>个</span>}
                    valueStyle={{ color: '#3f8600' }}
                   />
                </Col><Col span={12} >
                <Statistic
                    title="两月以上未联系"
                    value={1}
                    suffix={<span style={{color:'#888',fontSize:14}}>个</span>}
                    valueStyle={{ color: '#3f8600' }}
                   />
                </Col>
              </Row>
                  
               </Card>
            </Col>
          </Row>
        </div>
      </Tabs.TabPane>
      <Tabs.TabPane tab="数据分析" key="item-3" style={{backgroundColor:'#f0f0f0'}}>


        <Row gutter={[16, 16]} >
          <Col span={6} >
            <Statistic
                    title="今天新增客户数"
                    value={13}
                    style={{backgroundColor:'#fff',padding:20}}
                    suffix={<span style={{color:'#888',fontSize:14}}>个</span>}
                   />
          </Col>
          <Col span={6} >
            <Statistic
                    title="今日新增商机金额"
                    value={'5,419,270'}
                    style={{backgroundColor:'#fff',padding:20}}
                    suffix={<span style={{color:'#888',fontSize:14}}>元</span>}
                    
                   />
          </Col>
          <Col span={6}>
            <Statistic
                    title="今天成交客户数"
                    style={{backgroundColor:'#fff',padding:20}}
                    value={13}
                    suffix={<span style={{color:'#888',fontSize:14}}>个</span>}
                   />
          </Col>
          <Col span={6} >
            <Statistic
                    title="今日成交金额"
                    style={{backgroundColor:'#fff',padding:20}}
                    value={'2,000,000'}
                    suffix={<span style={{color:'#888',fontSize:14}}>元</span>}
                   />
          </Col>
          <Col span={12}>
               <Card title="客户流失原因分析" bordered={false} size="small">
                <Pie {...pieConfig} style={{height:300}}></Pie>
               </Card>
          </Col>
          <Col span={12}>
               <Card title="项目阶段分布图" bordered={false} size="small">
                <Column {...columnConfig} style={{height:300}}></Column>
               </Card>
          </Col>

          <Col span={6} >
               <Card title="设备销售额排行" bordered={false} size="small">
                <ProTable showHeader={false} size="small" search={false} rowKey="title" pagination={false} toolBarRender={false} columns={column1} dataSource={data1} />
               </Card>
          </Col>
          <Col span={12}>
               <Card title="员工业绩完成率" bordered={false} size="small">
                 <ProTable size="small" search={false} rowKey="title" pagination={false} toolBarRender={false} columns={column2} dataSource={data2} />
               </Card>
          </Col>
          <Col span={6}>
               <Card title="设备销量排行" bordered={false} size="small">
                <ProTable showHeader={false} size="small"  search={false} rowKey="title" pagination={false} toolBarRender={false} columns={column3} dataSource={data3} />
               </Card>
          </Col>
        </Row>

      </Tabs.TabPane>
     
    </Tabs>
    </div>;
});